<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<script src="js/jquery-3.0.0.min.js"></script>
	<style>
		#j{
			width: 100px;
			height: 100px;
			background: lime;
		}

		#h{
			width: 100px;
			height: 100px;
			background: orange;
		}

		#l{
			width: 100px;
			height: 100px;
			background: red;
		}
	</style>
</head>
<body>
	<div id="j"></div>
	<div id="h"></div>
	<div id="l"></div>
	<button>显示</button>
	<button>隐藏</button>
	<button>切换</button>
	<p><input type="text"><span>我是复读机</span></p>

	<input type="checkbox">
	<input type="checkbox">
	<input type="checkbox">
	<input type="checkbox">
	<input type="checkbox">
	<button>全选</button>
	<button>反选</button>
	<button>全不选</button>
	<script>
		// $('#j').css('background','lime');
		// $('#j').click(function(event) {
		// 	/* Act on the event */
		// 	$('#j').css('background', 'red');
		// });

		// $('input').eq(0).blur(function(event) {
		// 	/* Act on the event */
		// 	$('span').html($('input').eq(0).val());
		// });

		// $('input').eq(0).focus(function(event) {
		// 	/* Act on the event */
		// 	$('input').eq(0).val('');
		// });

		// $('input').eq(0).keyup(function(event) {
		// 	/* Act on the event */
		// 	$('span').html($('input').eq(0).val());
		// });

		$('button').eq(3).click(function(event) {
			/* Act on the event */
			$('input').prop('checked', true);
		});

		$('button').eq(4).click(function(event) {
			/* Act on the event */
			for(var i=1;i<$('input').length;i++){
			if($('input').eq(i).prop('checked')){
				$('input').eq(i).prop('checked', false);
		    }else $('input').eq(i).prop('checked', true);
		}
		});

		$('button').eq(5).click(function(event) {
			/* Act on the event */
			$('input').prop('checked', false);
		});


		$('button').eq(0).click(function(event) {
			/* Act on the event */
			$('#j').show(3000);
			$('#h').slideDown(3000,function(){
				$('#h').fadeto(3000,0.3);
			});
			$('#l').fadeIn(3000);

		});

		$('button').eq(1).click(function(event) {
			/* Act on the event */
			$('#j').hide(3000);
			$('#h').slideUp(3000);
			$('#l').fadeOut(3000);
		});

		$('button').eq(2).click(function(event) {
			/* Act on the event */
			$('#j').toggle(3000);
			$('#h').slideToggle(3000);
			$('#l').fadeToggle(3000);
		});


	</script>
</body>
</html>